<template>
    <div>
        <!-- 自定义header -->
        <Head_Diy />
        <!-- 背景图 -->
        <div class="bgBox">
			<swiper class="swiper" circular indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" indicator-active-color="#fff"
				duration="duration">
				<swiper-item v-for="(item) in imgList" :key="item.id" class="swiper-item">
					<image :src="item.url" style="width: 100%;height:100%"></image>
				</swiper-item>
			</swiper>
            <!-- <div class="userInfo">
                <div>songchap</div>
                <image src="https://images.weserv.nl/?url=https://wallhaven.icu/homepics/579wd3.png" class="userImg"></image>
            </div> -->
        </div>
        <!-- 动态列表 -->
        <TrendsItems ref="TrendsItems"/>
    </div>
</template>

<script>
import Head_Diy from '../../pages/Components/Head_Diy'
import TrendsItems from './Components/trendsItem.vue'
export default {
	data() {
		return {
			imgList: [
				{
					id: 1,
					url: 'https://img2.baidu.com/it/u=1738681348,1945875603&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
				}, {
					id: 2,
					url: 'https://t7.baidu.com/it/u=1732966997,2981886582&fm=193&f=GIF'
				}, {
					id: 3,
					url: 'https://img1.baidu.com/it/u=2345344959,2598464592&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
				},
			],
		}
	},
    components: {
        Head_Diy,
        TrendsItems
    },
    onReachBottom() {
			console.log('触底啦')
			// 触底啦
			// this.$refs['TrendsItems'].getMore()
		},
}
</script>

<style lang="scss" scoped>
.bgBox {
    position: relative;

    .userInfo {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #fff;
        bottom: -10px;
        right: 10px;
        .userImg{
            margin-left: 10px;
            width: 60px;
            height: 60px;
            border-radius: 10px;
        }
    }
}

.bgIMG {
    width: 100%;
    height: 30vh;
}
</style>
